<template>
	<view class="jTabBar-container">
		<uv-tabbar :value="tabbarVal" border placeholder zIndex="98" @change="tabbarChange" activeColor="#246ef9" inactiveColor="#aaaaaa" fixed safeAreaInsetBottom>
			<uv-tabbar-item v-for="(item, index) in tabbarList" :key="item.key" :name="item.url" :badge="item.badge" :text="item.label">
				<image class="u-page__item__slot-icon active" :src="item.activeIcon" slot="active-icon"></image>
				<image class="u-page__item__slot-icon inactive" :src="item.inactiveIcon" slot="inactive-icon"></image>
			</uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'jTabBar',
	props: {
		pageCur: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			tabbarVal: this.pageCur
		};
	},
	computed: {
		...mapState(['cartCount']),
		tabbarList() {
			let array = [
				{
					key: 'index',
					label: '首页',
					iconClass: 'yticon icon-arrow-fine-up',
					activeIcon: '/static/tabbar/tab1a.png',
					inactiveIcon: '/static/tabbar/tab1.png',
					url: '/pages/index/index',
					isTab: true
				},
				{
					key: 'category',
					label: '分类',
					iconClass: 'yticon icon-cate',
					activeIcon: '/static/tabbar/tab2a.png',
					inactiveIcon: '/static/tabbar/tab2.png',
					url: '/pages/category/category',
					isTab: true
				},
				{
					key: 'cart',
					label: '购物车',
					iconClass: 'yticon icon-gouwuche',
					activeIcon: '/static/tabbar/tab3a.png',
					inactiveIcon: '/static/tabbar/tab3.png',
					url: '/pages/cart/cart',
					// badge: this.cartCount,
					isTab: true
				},
				{
					key: 'user',
					label: '我的',
					iconClass: 'yticon icon-user',
					activeIcon: '/static/tabbar/tab4a.png',
					inactiveIcon: '/static/tabbar/tab4.png',
					url: '/pages/user/user',
					isTab: true
				}
			];

			return array;
		}
	},
	mounted() {
		this.tabbarVal = this.pageCur;
		this.initCartCount();
	},
	methods: {
		initCartCount() {
			let list = uni.getStorageSync('cartList_' + this.$constAppId);
			if (list && list.length > 0) {
				this.$store.state.cartCount = list.reduce((acc, current) => acc + current.sellnumber, 0);
			} else if (list.length == 0) {
				this.$store.state.cartCount = 0;
			}
		},
		tabbarChange(url) {
			uni.switchTab({
				url
			});
		}
	}
};
</script>

<style lang="less">
.jTabBar-container {
	/deep/ .u-tabbar {
		.u-tabbar__content {
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
			background: rgba(255, 255, 255, 0.9);
			backdrop-filter: blur(30rpx);
			-webkit-backdrop-filter: blur(30rpx);
		}
	}
	.u-page__item__slot-icon {
		// font-size: 48rpx;
		display: block;
		font-size: 0;
		width: 57rpx;
		height: 57rpx;
	}
	.active {
		color: #246ef9;
	}
	.inactive {
		color: #aaaaaa;
	}
}
</style>
